<template>
    <div class="charge-container">
        <el-card class="charge-card">
            <template #header>
                <div class="charge-header">
                    <span class="charge-title" style="font-size: 1.2em;">新增与流失人数统计</span>
                </div>
            </template>
            <!-- 统计时段 -->
            <el-form :model="form">
                <el-form-item label="统计时段">
                    <el-radio-group v-model="form.period">
                        <el-radio label="month">月</el-radio>
                        <el-radio label="quarter">季</el-radio>
                        <el-radio label="year">年</el-radio>
                    </el-radio-group>
                </el-form-item>
        
                <!-- 查找年份或开始年份 -->
                <el-form-item :label="form.period === 'year' ? '开始年份' : '查找年份'" style="width: 300px;">
                    <el-select v-model="form.startYear" placeholder="请选择年份">
                        <el-option
                            v-for="year in yearOptions"
                            :key="year"
                            :label="year"
                            :value="year"
                        />
                    </el-select>
                </el-form-item>
        
                <!-- 结束年份（仅当选择“年”时显示） -->
                <el-form-item v-if="form.period === 'year'" label="结束年份" style="width: 300px;">
                    <el-select v-model="form.endYear" placeholder="请选择结束年份">
                        <el-option
                            v-for="year in endYearOptions"
                            :key="year"
                            :label="year"
                            :value="year"
                        />
                    </el-select>
                </el-form-item>
        
                <!-- 按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="handleStatistics">统计</el-button>
                    <el-button @click="handleCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    
        <!-- 根据选择显示对应的统计图表 -->
        <el-card v-if="showMonthlyChart" style="width: 90%; margin: 20px auto;">
            <MonthlyCount :year="form.startYear" />
        </el-card>
    
        <el-card v-if="showQuarterChart" style="width: 90%; margin: 20px auto;">
            <QuarterCount :year="form.startYear" />
        </el-card>
    
        <el-card v-if="showYearlyChart" style="width: 90%; margin: 20px auto;">
            <YearlyCount :startYear="form.startYear" :endYear="form.endYear" />
        </el-card>
    </div>
    </template>
    
    <script setup>
    import { ref, computed } from 'vue';
    import { ElMessage } from 'element-plus';
    import MonthlyCount from '../chartComponent/lose&increase/MonthlyCount.vue';
    import QuarterCount from '../chartComponent/lose&increase/QuarterCount.vue';
    import YearlyCount from '../chartComponent/lose&increase/YearlyCount.vue';
    
    // 表单数据
    const form = ref({
        period: 'month', // 默认选择月
        startYear: '',
        endYear: ''
    });
    
    // 当前年份
    const currentYear = new Date().getFullYear();
    
    // 查找年份选项（过去5年）
    const yearOptions = Array.from({ length: 5 }, (_, i) => currentYear - i);
    
    // 结束年份选项
    const endYearOptions = computed(() => {
        return yearOptions.filter(year => year >= form.value.startYear);
    });
    
    // 图表显示状态
    const showMonthlyChart = ref(false);
    const showQuarterChart = ref(false);
    const showYearlyChart = ref(false);
    
    // 处理统计
    const handleStatistics = () => {
        if (!form.value.startYear || (form.value.period === 'year' && !form.value.endYear)) {
            ElMessage.error('请完整填写统计条件');
            return;
        }
        // 根据选择的统计周期显示对应的图表
        showMonthlyChart.value = form.value.period === 'month';
        showQuarterChart.value = form.value.period === 'quarter';
        showYearlyChart.value = form.value.period === 'year';
    };
    
    // 处理取消
    const handleCancel = () => {
        form.value.startYear = '';
        form.value.endYear = '';
        form.value.period = 'month';
        showMonthlyChart.value = false;
        showQuarterChart.value = false;
        showYearlyChart.value = false;
    };
    </script>
    
    <style scoped>
    /* 添加一些简单的样式 */
    .charge-card {
        max-width: 90%;
        margin: 0 auto;
        padding: 20px;
    }
    </style>
    